<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2022奥运会满意度调查-冰墩墩心情刻度尺</title>
		<script src="js/vue.min.js"></script> 
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="css/ruler.css"/>
	</head>
	<body>
		<div id="app">
			<div class="BingDunDun" :style="jumpStyle">
				<div class="body"></div>
				<div class="ear1"></div>
				<div class="ear2"></div>
				<div class="eye1"></div>
				<div class="eye2"></div>
				<div class="face c_blue"></div>
				<div class="face c_red"></div>
				<div class="face c_purple"></div>
				<div class="face c_yellow"></div>
				<div class="face c_green"></div>
				<div class="nose"></div>
				<div class="mouse" :style="mouseStyle"></div>
				<div class="leg1"></div>
				<div class="leg2"></div>
				<div class="arm1"></div>
				<div class="arm2" :style="armStyle"></div>
				<div class="logo"></div>
			</div> 
			<div class="box">
				<h1>2022奥运会满意度调查</h1>
				<el-slider 
					:step="25"
					show-stops
					:marks="marks"
					:format-tooltip="formatTooltip"
					@change="changeSilder"
					v-model="sliderValue">
				</el-slider>
			</div>
			
		</div> 
	</body>
	<script>
		const app = new Vue({
			el: "#app",
			data: {  
				sliderValue: 75,
				marks: { 
					0: '不满意', 
					25: '有点不满意',
					50: '普通',
					75: '满意',
					100: '棒', 
				},
				mouseStyle : {},
				jumpStyle : {},
				armStyle : {}
			},
			methods: {  
				// 滑动监听
				changeSilder(val) {
					console.log(val); 
					switch (val){ 
						case 0:
							this.mouseStyle = {
								top: '210px',
								transform: 'rotate(180deg)', 
								height: '90px'
							}
							this.armStyle = {}
							this.jumpStyle = {}
							break;
						case 25:
							this.mouseStyle = {
								top: '210px',
								transform: 'rotate(180deg)' 
							}
							this.armStyle = {}
							this.jumpStyle = {}
							break;
						case 50:
							this.mouseStyle = { 
								borderRadius: '20%'
							}
							this.armStyle = {}
							this.jumpStyle = {}
							break;
						case 75: 
							this.armStyle = {}
							this.mouseStyle = {}
							this.jumpStyle = {}
							break;
						case 100:
							this.armStyle = {
								left: '463px',
								top: '142px',
								transform: 'rotate(37deg)'
							}
							this.mouseStyle = {
								height: '70px'
							}
							this.jumpStyle = { 
								animation: 'jump 0.5s infinite'
							}
							break;
						default:
							break;
					}
				},
				// 格式化提示框
				formatTooltip(val) {
					return val + '分';
				}
			}
		});
	</script>
</html>
